<template>
  <Modal title="团队开牌" :width="600" :show-confirm-button="false">
    <div class="team-card-modal">
      <div class="selected-cards-section">
        <h4>已选手牌</h4>
        <div class="selected-cards-grid">
          <div
            v-for="card in selectedCards"
            :key="card"
            class="selected-card"
          >
            <span class="card-number">{{ card }}</span>
            <a-button
              type="text"
              size="small"
              @click="removeCard(card)"
            >
              ×
            </a-button>
          </div>
        </div>
        <div class="card-count">手牌数: {{ selectedCards.length }}</div>
      </div>

      <div class="add-card-section">
        <label>手牌号:</label>
        <a-input
          v-model:value="newCardNumber"
                      placeholder="点击&quot;Enter&quot;录入"
          @keyup.enter="addCard"
        />
      </div>

      <div class="modal-actions">
        <a-button type="primary" @click="handleConfirm">确定</a-button>
        <a-button danger @click="handleDelete">删除</a-button>
        <a-button @click="handleCancel">取消</a-button>
      </div>
    </div>
  </Modal>
</template>

<script setup lang="ts">
import { ref } from 'vue'

import { useVbenModal } from '@vben/common-ui';

import { message } from 'ant-design-vue'

defineOptions({
  name: 'TeamCardModal',
});

interface Emits {
  (e: 'success'): void;
}

interface ModalPayload {
  cardNumbers?: string[];
}

const emit = defineEmits<Emits>()

const selectedCards = ref<string[]>([])
const newCardNumber = ref('')

const addCard = () => {
  if (!newCardNumber.value.trim()) {
    message.warning('请输入手牌号')
    return
  }

  if (selectedCards.value.includes(newCardNumber.value)) {
    message.warning('该手牌已选择')
    return
  }

  selectedCards.value.push(newCardNumber.value)
  newCardNumber.value = ''
}

const removeCard = (cardNumber: string) => {
  const index = selectedCards.value.indexOf(cardNumber)
  if (index > -1) {
    selectedCards.value.splice(index, 1)
  }
}

const [Modal, modalApi] = useVbenModal({
  showCancelButton: false,
  showConfirmButton: false,
  async onOpenChange(isOpen) {
    if (!isOpen) {
      return;
    }
    const data = modalApi.getData<ModalPayload>();
    selectedCards.value = data?.cardNumbers || ['1001', '1002', '1003', '1004', '1005', '1006', '1007', '1008', '1009', '1010'];
    newCardNumber.value = '';
  },
});

const handleConfirm = () => {
  if (selectedCards.value.length === 0) {
    message.warning('请至少选择一个手牌')
    return
  }

  // 这里可以调用API进行团队开牌
  message.success(`团队开牌成功，共 ${selectedCards.value.length} 个手牌`)
  emit('success');
  modalApi.close();
}

const handleDelete = () => {
  selectedCards.value = []
  message.success('已清空所有手牌')
}

const handleCancel = () => {
  modalApi.close();
}
</script>

<style scoped>
.team-card-modal {
  padding: 20px 0;
}

.selected-cards-section {
  margin-bottom: 20px;
}

.selected-cards-section h4 {
  margin-bottom: 15px;
  color: #333;
}

.selected-cards-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-bottom: 10px;
}

.selected-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  font-size: 14px;
  background: #f0f8ff;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
}

.card-number {
  font-weight: bold;
}

.card-count {
  font-size: 14px;
  font-weight: bold;
  color: #666;
}

.add-card-section {
  margin-bottom: 20px;
}

.add-card-section label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
  color: #333;
}

.modal-actions {
  display: flex;
  gap: 15px;
  justify-content: center;
  margin-top: 30px;
}
</style>
